<template>
  <el-container>
    <div class='shop-frame'>
      <el-form autoComplete="on" :model="userForm" :rules="userRules" ref="userForm" label-width="120px"
        label-position="right" class="card-box shop-form">
        <el-form-item class="inp" prop="name" label="姓名：" style="width: 80%;">
          <el-input name='name' v-model="userForm.name" autoComplete="on" clearable />
        </el-form-item>
        <el-form-item class="inp" prop="num" label="学号：" style="width: 80%;">
          <el-input name='num' v-model="userForm.num" autoComplete="on" clearable />
        </el-form-item>
        <el-form-item class="inp" prop="sex" label="性别：" style="width: 80%;">
          <el-input name='sex' v-model="userForm.sex" autoComplete="on" clearable />
        </el-form-item>
        <el-form-item class="inp" prop="dep" label="院系：" style="width: 80%;">
          <el-input name='dep' v-model="userForm.dep" autoComplete="on" clearable />
        </el-form-item>
        <el-form-item class="inp" prop="phone" label="电话：" style="width: 80%;">
          <el-input name='phone' v-model="userForm.phone" autoComplete="on" clearable />
        </el-form-item>
        <el-form-item class="inp" prop="issue" label="问题类型：" style="width: 80%;">
          <el-input name='issue' v-model="userForm.issue" autoComplete="on" clearable />
        </el-form-item>
        <el-form-item class="inp" prop="totalNum" label="咨询总次数：" style="width: 80%;">
          <el-input name='totalNum' v-model="userForm.totalNum" autoComplete="on" clearable />
        </el-form-item>
        <el-form-item class="inp" prop="result" label="咨询效果自评：" style="width: 80%;">
          <el-input name='result' v-model="userForm.result" autoComplete="on" clearable />
        </el-form-item>
       
        <div class="studentList-btn">
          <el-button class="formBtn" @click="handleComplaint()">
            提交
          </el-button>
          <!-- <el-button class="formBtn" :loading="loading" @click="handleCancel()">
            取消
          </el-button> -->
        </div>
      </el-form>
    </div>
  </el-container>
</template>
<script>
  import {
    addFinish
  } from '@/api/finish'

  export default {
    data() {
      return {        
        userRules: {
          result: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          totalNum: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          dep: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          name: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          num: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          issue: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }]
        },
        userForm: {}
      }
    },
    methods: {
      handleComplaint() {
        addFinish(this.userForm).then(resp => {
            this.$router.push("/dashboard")
        })
      }
    }
  }

</script>
